<template>
  <div :class="statusClass">{{ statusName }}</div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  // 状态code
  status: {
    type: String,
    default: ""
  },
  dark: {
    type: Boolean,
    default: false
  }
});

const statusClass = computed(() => {
  let cn = [];
  cn.push("status");
  if (props.dark) {
    cn.push("dark");
  }
  switch (props.status) {
    case "UNDO":
      cn.push("status-3");
      break;
    case "DONE":
      cn.push("status-2");
      break;
  }

  return cn.join(" ");
});
const statusName = computed(() => {
  let name = "";
  switch (props.status) {
    case "UNDO":
      name = "未完成";
      break;
    case "DONE":
      name = "已完成";
      break;
  }
  return name;
});
</script>

<style lang="scss" scoped>
.status {
  position: relative;
  padding-left: 16px;

  &::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    content: "";
    background: #3b82f6;
    border-radius: 8px;
  }
  // 已取消
  &.status-0 {
    color: #bcbcbc;

    &::before {
      background: #bcbcbc;
    }
  }
  // 执行中
  &.status-1 {
    color: #3b82f6;

    &::before {
      background: #3b82f6;
    }
  }
  // 已完成
  &.status-2 {
    color: #10b981;

    &::before {
      background: #10b981;
    }
  }
  // 未开始
  &.status-3 {
    color: #f45252;

    &::before {
      background: #f45252;
    }
  }

  &.dark {
    &.status-2 {
      color: #04ff9d;

      &::before {
        background: #04ff9d;
      }
    }
    // 未开始
    &.status-3 {
      color: #ff0844;

      &::before {
        background: #ff0844;
      }
    }
  }
  // // 已驳回
  // &.status-4 {
  //   color: #ef4444;

  //   &::before {
  //     background: #ef4444;
  //   }
  // }
}
</style>
